<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>100.0018.浏览器原理-宏任务和微任务</title>
</head>
<body>
    <div>
        <div id="showRespDataId"></div>
        <hr><br><hr>
        <div id="showAllNet"></div>
    </div>
</body>
<script>
window.onload = function(){
        console.log('js执行完成 , window context 退出');
      }
      
function getWebData(URL){
    /**
     * 1: 新建 XMLHttpRequest 请求对象
     */
    let xhr = new XMLHttpRequest()
 
    /**
     * 2: 注册相关事件回调处理函数 
     */
    xhr.onreadystatechange = function () {
        console.log(xhr);
        switch(xhr.readyState){
          case 0: // 请求未初始化
            console.log(" 请求未初始化 ")
            break;
          case 1://OPENED
            console.log("OPENED")
            break;
          case 2://HEADERS_RECEIVED
            console.log("HEADERS_RECEIVED")
            break;
          case 3://LOADING  
            console.log("LOADING")
            break;
          case 4://DONE
            if(xhr.status == 200 || xhr.status == 304){
                var el = document.getElementById("showAllNet");
                el.innerHTML = xhr.responseText
            }
            console.log("DONE")
            break;
        }
        
    }
 
    xhr.ontimeout = function(e) { console.log('ontimeout') }
    xhr.onerror = function(e) { console.log('onerror') }
 
    /**
     * 3: 打开请求
     */
    xhr.open('Get', URL, true);// 创建一个 Get 请求, 采用异步
 
 
    /**
     * 4: 配置参数
     */
    xhr.timeout = 30000 // 设置 xhr 请求的超时时间
    xhr.responseType = "text" // 设置响应返回的数据格式
    // xhr.setRequestHeader("X_TEST","time.geekbang")
 
    /**
     * 5: 发送请求
     */
    xhr.send();
}
// https://www.fastmock.site/mock/e38f7ca59f50d8aa0ecee490a326dff2/demo/delay/test01

getWebData('https://www.fastmock.site/mock/e38f7ca59f50d8aa0ecee490a326dff2/demo/delay/test01');

</script>
</html>